<template>
  <div class="message-end-files-example p-6">
    <h2 class="text-2xl font-bold mb-6">onMessageEnd 文件处理示例</h2>
    
    <div class="space-y-6">
      <!-- 说明文档 -->
      <div class="bg-blue-50 border border-blue-200 rounded-lg p-4">
        <h3 class="text-lg font-semibold text-blue-800 mb-2">功能说明</h3>
        <p class="text-blue-700">
          此示例展示了如何在 <code>onMessageEnd</code> 事件中获取文件数组，并将文件信息显示在消息内容下方。
          系统会自动处理多种格式的文件数据，并将其标准化后添加到消息对象中。
        </p>
      </div>
      
      <!-- 模拟流式消息 -->
      <div class="bg-white border rounded-lg p-4">
        <h3 class="text-lg font-semibold mb-4">模拟流式消息处理</h3>
        
        <div class="space-y-4">
          <button 
            @click="startStreamingMessage"
            :disabled="isStreaming"
            class="px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600 disabled:opacity-50"
          >
            {{ isStreaming ? '正在处理...' : '开始流式消息' }}
          </button>
          
          <button 
            @click="simulateMessageEndWithFiles"
            :disabled="!isStreaming"
            class="px-4 py-2 bg-purple-500 text-white rounded hover:bg-purple-600 disabled:opacity-50"
          >
            模拟 MessageEnd 事件（带文件）
          </button>
          
          <button 
            @click="simulateHistoryWithFiles"
            class="px-4 py-2 bg-orange-500 text-white rounded hover:bg-orange-600"
          >
            模拟历史对话（带文件）
          </button>
          
          <button 
            @click="clearMessages"
            class="px-4 py-2 bg-gray-500 text-white rounded hover:bg-gray-600"
          >
            清空消息
          </button>
        </div>
      </div>
      
      <!-- 消息显示区域 -->
      <div class="bg-gray-50 border rounded-lg p-4 min-h-[300px]">
        <h3 class="text-lg font-semibold mb-4">消息列表</h3>
        
        <div v-if="messages.length === 0" class="text-gray-500 text-center py-8">
          暂无消息，点击"开始流式消息"开始测试
        </div>
        
        <div v-else class="space-y-4">
          <ChatMessage 
            v-for="message in messages" 
            :key="message.id" 
            :message="message"
          />
        </div>
      </div>
      
      <!-- 事件日志 -->
      <div class="bg-gray-100 border rounded-lg p-4">
        <h3 class="text-lg font-semibold mb-4">事件日志</h3>
        
        <div class="bg-black text-green-400 p-3 rounded font-mono text-sm max-h-40 overflow-y-auto">
          <div v-if="eventLogs.length === 0" class="text-gray-500">
            等待事件...
          </div>
          <div v-else>
            <div v-for="(log, index) in eventLogs" :key="index" class="mb-1">
              <span class="text-gray-400">[{{ log.timestamp }}]</span>
              <span :class="log.type === 'error' ? 'text-red-400' : 'text-green-400'">
                {{ log.message }}
              </span>
            </div>
          </div>
        </div>
        
        <button 
          @click="clearLogs"
          class="mt-2 px-3 py-1 bg-gray-600 text-white rounded text-sm hover:bg-gray-700"
        >
          清空日志
        </button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import ChatMessage from '@/components/chat/ChatMessage.vue'
import type { ChatItem } from '@/types/app'

// 状态管理
const isStreaming = ref(false)
const messages = ref<ChatItem[]>([])
const eventLogs = ref<Array<{ timestamp: string; message: string; type: 'info' | 'error' }>>([])

// 添加日志
const addLog = (message: string, type: 'info' | 'error' = 'info') => {
  const timestamp = new Date().toLocaleTimeString()
  eventLogs.value.push({ timestamp, message, type })
  console.log(`[${timestamp}] ${message}`)
}

// 开始流式消息
const startStreamingMessage = () => {
  isStreaming.value = true
  addLog('🚀 开始流式消息处理')
  
  // 添加用户消息
  const userMessage: ChatItem = {
    id: `user_${Date.now()}`,
    content: '请为我生成一份分析报告，包含相关的图表和数据文件。',
    isAnswer: false
  }
  messages.value.push(userMessage)
  addLog('📝 用户消息已添加')
  
  // 添加AI回复占位符
  const aiMessage: ChatItem = {
    id: `ai_${Date.now()}`,
    content: '',
    isAnswer: true,
    streaming: true
  }
  messages.value.push(aiMessage)
  addLog('🤖 AI消息占位符已创建')
  
  // 模拟流式内容更新
  simulateStreamingContent(aiMessage.id)
}

// 模拟流式内容更新
const simulateStreamingContent = (messageId: string) => {
  const fullContent = `正在为您生成分析报告...

## 数据分析结果

根据您的要求，我已经完成了数据分析，主要发现如下：

1. **趋势分析**: 数据显示明显的上升趋势
2. **关键指标**: 各项指标均达到预期目标
3. **风险评估**: 识别出3个潜在风险点

## 生成的文件

我已为您生成了以下文件，请查看：`

  let currentIndex = 0
  const interval = setInterval(() => {
    const messageIndex = messages.value.findIndex(m => m.id === messageId)
    if (messageIndex !== -1 && currentIndex < fullContent.length) {
      messages.value[messageIndex].content = fullContent.substring(0, currentIndex + 1)
      currentIndex += Math.floor(Math.random() * 3) + 1 // 随机速度
      addLog(`📄 内容更新: ${currentIndex}/${fullContent.length} 字符`)
    } else {
      clearInterval(interval)
      messages.value[messageIndex].streaming = false
      addLog('✅ 流式内容更新完成')
    }
  }, 100)
}

// 模拟 MessageEnd 事件（带文件）
const simulateMessageEndWithFiles = () => {
  if (!isStreaming.value) return
  
  addLog('🎯 模拟 onMessageEnd 事件')
  
  // 模拟从 MessageEnd 事件中接收到的文件数据
  const mockMessageEndData = {
    id: 'message_end_123',
    metadata: {
      files: [
        {
          id: 'analysis_report.pdf',
          name: '数据分析报告.pdf',
          type: 'application/pdf',
          url: 'https://example.com/analysis_report.pdf',
          size: 2048576
        },
        {
          file_id: 'trend_chart.png',
          filename: '趋势图表.png',
          mime_type: 'image/png',
          download_url: 'https://via.placeholder.com/600x400/4CAF50/FFFFFF?text=趋势图表',
          file_size: 524288
        }
      ],
      retriever_resources: [
        {
          content: '相关数据来源',
          dataset_name: '历史数据集',
          score: 0.95
        }
      ]
    },
    // 也可能在其他位置
    files: [
      {
        upload_file_id: 'summary_data.xlsx',
        name: '汇总数据.xlsx',
        type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
        url: 'https://example.com/summary_data.xlsx',
        size: 1048576
      }
    ]
  }
  
  // 模拟 onMessageEnd 处理逻辑
  const lastAiMessage = [...messages.value].reverse().find(m => m.isAnswer)
  if (lastAiMessage) {
    addLog('📎 从 MessageEnd 中提取文件信息')
    
    // 提取文件（模拟实际的提取逻辑）
    let allFiles: any[] = []
    
    if (mockMessageEndData.files) {
      allFiles.push(...mockMessageEndData.files)
      addLog(`📁 从根级别提取到 ${mockMessageEndData.files.length} 个文件`)
    }
    
    if (mockMessageEndData.metadata?.files) {
      allFiles.push(...mockMessageEndData.metadata.files)
      addLog(`📁 从 metadata 提取到 ${mockMessageEndData.metadata.files.length} 个文件`)
    }
    
    // 标准化文件数据
    const standardizedFiles = allFiles.map((file: any) => ({
      id: file.id || file.upload_file_id || file.file_id || `file_${Date.now()}`,
      name: file.name || file.filename || file.id,
      type: file.type || file.mime_type || 'application/octet-stream',
      url: file.url || file.download_url || file.file_url,
      size: file.size || file.file_size,
      belongs_to: 'assistant' as const
    }))
    
    // 更新消息对象
    const messageIndex = messages.value.findIndex(m => m.id === lastAiMessage.id)
    if (messageIndex !== -1) {
      messages.value[messageIndex] = {
        ...messages.value[messageIndex],
        message_files: standardizedFiles
      }
      
      addLog(`✅ 已将 ${standardizedFiles.length} 个文件添加到消息中`)
      addLog('🎉 onMessageEnd 事件处理完成')
    }
  }
  
  isStreaming.value = false
}

// 模拟历史对话（带文件）
const simulateHistoryWithFiles = () => {
  addLog('🎯 模拟历史对话（带文件）')
  
  // 清空现有消息
  messages.value = []
  isStreaming.value = false
  
  // 模拟从API获取的历史聊天数据
  const mockHistoryData = [
    {
      id: 'history_1',
      query: '请帮我分析这些政策文档',
      answer: '我已经分析了您提供的政策文档，以下是主要发现：\n\n## 政策要点\n1. 补贴标准有所调整\n2. 申请流程更加简化\n3. 监管要求更加严格\n\n我已为您生成了详细的分析报告。',
      files: [
        {
          id: 'policy_analysis.pdf',
          name: '政策分析报告.pdf',
          type: 'application/pdf',
          url: 'https://example.com/policy_analysis.pdf',
          size: 1536000,
          belongs_to: 'assistant'
        },
        {
          id: 'comparison_chart.png',
          name: '政策对比图表.png',
          type: 'image/png',
          url: 'https://via.placeholder.com/500x300/2196F3/FFFFFF?text=政策对比图表',
          size: 256000,
          belongs_to: 'assistant'
        }
      ],
      message_files: [
        {
          id: 'user_doc1.docx',
          name: '用户上传文档1.docx',
          type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
          url: 'https://example.com/user_doc1.docx',
          size: 512000,
          belongs_to: 'user'
        }
      ]
    },
    {
      id: 'history_2',
      query: '能否生成一个数据汇总表？',
      answer: '当然可以！我已经根据分析结果生成了数据汇总表，包含了所有关键指标和趋势数据。',
      files: [
        {
          id: 'data_summary.xlsx',
          name: '数据汇总表.xlsx',
          type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
          url: 'https://example.com/data_summary.xlsx',
          size: 768000,
          belongs_to: 'assistant'
        },
        {
          id: 'trend_analysis.png',
          name: '趋势分析图.png',
          type: 'image/png',
          url: 'https://via.placeholder.com/600x400/4CAF50/FFFFFF?text=趋势分析图',
          size: 384000,
          belongs_to: 'assistant'
        }
      ]
    }
  ]
  
  // 模拟ChatApp.vue中的文件处理逻辑
  const processFiles = (sourceItem: any) => {
    let allFiles: any[] = []
    
    // 从多个可能的来源收集文件
    if (sourceItem.files && Array.isArray(sourceItem.files)) {
      allFiles.push(...sourceItem.files)
      addLog(`📁 从 files 字段获取到文件: ${sourceItem.files.length}`)
    }
    
    if (sourceItem.message_files && Array.isArray(sourceItem.message_files)) {
      allFiles.push(...sourceItem.message_files)
      addLog(`📁 从 message_files 字段获取到文件: ${sourceItem.message_files.length}`)
    }
    
    // 标准化文件格式
    return allFiles.map((file: any) => ({
      id: file.id || file.upload_file_id || file.file_id || `file_${Date.now()}_${Math.random()}`,
      name: file.name || file.filename || file.id || '未知文件',
      type: file.type || file.mime_type || 'application/octet-stream',
      url: file.url || file.download_url || file.file_url || '#',
      size: file.size || file.file_size || 0,
      belongs_to: file.belongs_to || 'assistant'
    }))
  }
  
  // 生成聊天列表
  const newChatList: any[] = []
  mockHistoryData.forEach((item: any) => {
    // 添加用户消息
    if (item.query) {
      const userFiles = processFiles(item)
      const userMessage: any = {
        id: `${item.id}_query`,
        content: item.query,
        isAnswer: false,
        message_files: userFiles.filter(f => f.belongs_to === 'user' || !f.belongs_to)
      }
      
      // 如果有AI助手的文件，也添加到files字段用于显示
      const assistantFiles = userFiles.filter(f => f.belongs_to === 'assistant')
      if (assistantFiles.length > 0) {
        userMessage.files = assistantFiles
      }
      
      newChatList.push(userMessage)
      
      if (userFiles.length > 0) {
        addLog(`✅ 用户消息 ${item.id}_query 包含 ${userFiles.length} 个文件`)
      }
    }
    
    // 添加 AI 回复
    if (item.answer) {
      const aiFiles = processFiles(item)
      const aiMessage: any = {
        id: item.id,
        content: item.answer,
        isAnswer: true,
        agent_thoughts: item.agent_thoughts || [],
        message_files: aiFiles.filter(f => f.belongs_to === 'user'),
        // 将AI生成的文件添加到files字段，用于在消息内容下方显示
        files: aiFiles.filter(f => f.belongs_to === 'assistant' || !f.belongs_to)
      }
      
      newChatList.push(aiMessage)
      
      if (aiFiles.length > 0) {
        addLog(`✅ AI消息 ${item.id} 包含 ${aiFiles.length} 个文件`)
      }
    }
  })
  
  // 更新消息列表
  messages.value = newChatList
  
  addLog(`📋 历史对话加载完成，共 ${newChatList.length} 条消息`)
  addLog(`📊 统计: 包含文件的消息 ${newChatList.filter(m => (m.files && m.files.length > 0) || (m.message_files && m.message_files.length > 0)).length} 条`)
}

// 清空消息
const clearMessages = () => {
  messages.value = []
  isStreaming.value = false
  addLog('🗑️ 消息列表已清空')
}

// 清空日志
const clearLogs = () => {
  eventLogs.value = []
}
</script>

<style scoped>
.message-end-files-example {
  max-width: 1200px;
  margin: 0 auto;
}

code {
  @apply bg-gray-200 px-1 py-0.5 rounded text-sm font-mono;
}
</style> 